<%@ page import="com.service.CuisineService" %>
<%@ page import="com.entity.Cuisine" %>
<%@ page import="java.util.List" %>
<%@ page import="com.mapper.StoreMapper" %>
<%@ page import="com.Imp.StoreMapperImpl" %>
<%@ page import="com.entity.Store" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>店铺详情页</title>
    <!-- 引入 Bootstrap 样式 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" type="text/css" href="./css/menu.css">
</head>
<body>

<div class="container-fluid">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-5">
        <%
            // 实例化CuisineService类
            CuisineService cuisineService = new CuisineService();
            String storeId = request.getParameter("id");
            StoreMapper storeMapper = new StoreMapperImpl();
            Store store = storeMapper.getStoreBystoreId(storeId);
        %>
        <a class="button btn btn-danger mr-2" href="storeList.jsp">返回店铺</a>
        <a class="navbar-brand mx-auto" href="#"><%=store.getName()%></a>
    </nav>

    <div class="row">
        <div class="col-md-12 main-content">
            <div v-for="store in stores" :key="store.id" class="store-info">
                <%-- 使用循环控制每行的菜品数量 --%>
                <% int count = 0; %>
                <div class="row row-cols-4">
                    <%
                        // 实例化CuisineService类
                        List<Cuisine> cuisineList = cuisineService.getCuisinesByStoreId(storeId);
                        for (Cuisine cuisine : cuisineList) {
                    %>
                    <%-- 每四个菜品开始一个新的行 --%>
                    <% if (count % 4 == 0) { %>
                </div>
                <div class="row row-cols-4">
                    <% } %>

                    <div class="col-sm-3">
                        <div class="card">
                            <img class="card-img-top cuisine-image" src=<%= cuisine.getPhotoURL() %> alt="菜品图片">
                            <div class="card-body">
                                <h5 class="card-title"><%= cuisine.getCuisineName() %></h5>
                                <p class="card-text">原料：<%= cuisine.getMaterials() %></p>
                                <p class="card-text">价格：¥<%= cuisine.getPrice() %></p>
                                <form action="CartController?op=add" method="post" class="text-center">
                                    <input type="hidden" name="cuisineId" value="<%= cuisine.getCuisineId() %>">
                                    <button type="submit" class="btn btn-primary">添加</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <% count++; %>
                    <% } %>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- 引入 jQuery、Popper 和 Bootstrap JavaScript -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>



